<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="__CSS__/layui.css" />
    <script type="text/javascript" src="__JS__/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="__JS__/3.1.1/layer.js"></script>
    <script type="text/javascript" src="__JS__/layui.js"></script>
    <style type="text/css" media="screen">
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        label{
            color: white;
        }
        .ts1{
            color: red !important;
        }
        .ts2{
            color:green !important;
        }
        .ts{
            color: blue;!important;
        }
        .h1{
            color: #00FFFF;
           font-family: 微软雅黑;
        }
    </style>
</head>
<body background="__IMAGE__/user_register.jpg" style="background-size: 100%" >
<form class="layui-form" >

    <h1 style="margin-left:45%;margin-top:-20%">用&nbsp;户&nbsp;注&nbsp;册</h1>

    <div class="layui-form-item  layui-col-md12">
        <label class="layui-form-label">账号：</label>
        <div class="layui-input-block" >
            <input type="text" id="username" name="user" placeholder="请输入账号" class="layui-input">
            <div id="ts_u" class="ts">111111111111111111111111111111111111111111111111111</div>
        </div>
    </div>
    <div class="layui-form-item layui-col-md12">
        <label class="layui-form-label">密码：</label>
        <div class="layui-input-block">
            <input type="password" placeholder="请输入密码" id="psd" name="psd" class="layui-input" lay-verify="psd">

        </div>
        </div>
    <div class="layui-form-item layui-col-md12">
        <label class="layui-form-label" >确认密码：</label>
        <div class="layui-input-block">
            <input type="password" placeholder="请输入密码" name="psd1" class="layui-input" >

        </div>
    </div>
    </div>
    <div class="layui-form-item layui-col-md12">
        <label class="layui-form-label">邮箱：</label>
        <div class="layui-input-block">
            <input type="text" placeholder="请输入邮箱" name="email"  id="email" class="layui-input"  lay-verify="email">

        </div>
        </div>
    </div>
    <div class="layui-form-item layui-col-md12">
        <div class="layui-input-block">
            <input type="button" name="register" class="layui-btn layui-btn-fluid  layui-btn-radius layui-"  value="注册" />
        </div>
        <div class="layui-input-block">
            <a href="{:url('Login/login')}">  <input type="button" class="layui-btn layui-btn-fluid layui-btn-normal layui-btn-radius" style="margin-top: 2%"  value="返回登录"/> </a>
        </div>
    </div>

    <script type="text/javascript">
       layui.use('form',function () {
           var form=layui.form;

       });
        $(function () {

            $('input[name=register]').click(function () {
                    var user=$('input[name=user]').val();
                    var psd=$('input[name=psd]').val();
                    var psd1=$('input[name=psd1]').val();
                    var email=$('input[name=email]').val();
                if(user==""){
                    layer.msg('账号为空!',{time:1000});
                    return false;
                }
                if(user<6  || user>11){
                   layer.msg("您输入的账号格式有误,请重新输入!",{time:2000});
                }
                if(psd==""){
                    layer.msg('密码为空!',{time:1000});
                    return false;
                }
                if(email==""){
                    layer.msg('邮箱为空!',{time:1000});
                    return false;
                }
                if(psd1!=psd){
                    layer.msg('两次密码不一致!',{time:1000});
                    return false;
                }
                $.ajax({
                    type:'post',
                    url:'register',
                    data:{
                        username:user,
                        password:psd,
                        email:email,
                    },
                    dataType:'json',
                    success:function (data) {
                            layer.msg(data.msg,{time:1000},function () {
                                window.location.href="/admin/login/login";
                            });
                    }
                })
            })
        });
        var p_u=/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
        $('#username').bind(function () {
            var username=$('#username').val();
            if(!p_u.test(username)){
                layer.msg('账号格式不符合要求!');
            }
        });
       $('input[name=user]').change(function () {
            var name=$('input[name=user]').val();
            $.ajax({
                type: 'post',
                url: 'name_check',
                data:{
                    username:name,
                },
                dataType: 'json',
                success:function (data) {
                     layer.tips(data,'#username');
                }
            })
       });
       $('input[name=email]').change(function () {
           var email=$('input[name=email]').val();
           $.ajax({
               type: 'post',
               url: 'email_check',
               data:{
                   email:email,
               },
               dataType: 'json',
               success:function (data) {
                   layer.tips(data,'#email');
               }
           })
       });
        form.verify({
           psd: [
                /^[\S]{6,10}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        });
    </script>

</form>
</body>
</html>